<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/31
  Time: 20:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cart</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="aStar Fashion Template Project">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.3/bootstrap.css">
    <link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
    <link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
    <link rel="stylesheet" type="text/css" href="styles/cart.css">
    <link rel="stylesheet" type="text/css" href="styles/cart_responsive.css">
</head>
<body>

<div class="super_container">

    <!-- Header -->

   <jsp:include page="menu.jsp"></jsp:include>

    <!-- Home -->

    <div class="home">
        <div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/product_background.jpg" data-speed="0.8"></div>
        <div class="home_container">
            <div class="home_content">
                <div class="home_title">Cart</div>
                <div class="breadcrumbs">
                    <ul class="d-flex flex-row align-items-center justify-content-start">
                        <li><a href="index.html">Home</a></li>
                        <li>Your Cart</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Cart -->

    <div class="cart_section">
        <div class="section_container">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="cart_container">

                            <!-- Cart Bar -->
                            <div class="cart_bar">
                                <ul class="cart_bar_list item_list d-flex flex-row align-items-center justify-content-start">
                                    <li>商品</li>
                                    <li>类型</li>
                                    <li>价格</li>
                                    <li>数量</li>
                                    <li>总计</li>
                                    <li><input type="checkbox" name="allcheck"></li>
                                </ul>
                            </div>
                            <form action="toAddress.to" method="post" id="sdsd">
                            <!-- Cart Items -->
                            <div class="cart_items">
                                <ul class="cart_items_list">

                                    <!-- Cart Item -->
                                    <c:forEach items="${sessionScope.shopCar}" var="map">
                                    <li id="li_${map.value.gid}"  class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
                                        <div class="product d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
                                            <div><div class="product_image"><img src="${map.value.gimage}" alt=""></div></div>
                                            <div class="product_name"><a href="product.html">${map.value.gname}</a></div>
                                        </div>

                                        <div class="product_size text-lg-center product_text"><span>类型: </span>${map.value.glabel}</div>
                                        <div class="product_price text-lg-center product_text"><span>价格: </span>${map.value.gprice}</div>
                                        <div class="product_quantity_container">
                                            <div class="product_quantity ml-lg-auto mr-lg-auto text-center">
                                                <span class="product_text product_num" id="spa_${map.value.gid}">${map.value.goodscount}</span>
                                                <div class="qty_sub qty_button trans_200 text-center" gid="${map.value.gid}">-</div>
                                                <div class="qty_add qty_button trans_200 text-center" gid="${map.value.gid}">+</div>
                                            </div>
                                        </div>
                                        <div class="product_total text-lg-center product_text"><span>总计: </span><label id="sp_${map.value.gid}"><fmt:formatNumber maxFractionDigits="3" minFractionDigits="2" value="${(map.value.gprice)*(map.value.goodscount)*(map.value.gdiscount)}"></fmt:formatNumber></label></div>
                                        <div class="product_color text-lg-center product_text"><input type="checkbox" value="${map.value.gid}" name="evecheck"></div>
                                    </li>
                                    </c:forEach>
                                </ul>
                            </div>

                            <!-- Cart Buttons -->
                            <div class="cart_buttons d-flex flex-row align-items-start justify-content-start">
                                <div class="cart_buttons_inner ml-auto d-flex flex-row align-items-start justify-content-start flex-wrap">
                                    <div class="button button_continue trans_200"><a href="categories.html">继续购物</a></div>
                                    <div class="button button_clear trans_200"><a href="categories.html">清空购物车t</a></div>
                                    <div class="button button_update trans_200" id="btn03"><a href="javascript:void(0)">结算购物车</a> </div>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section_container cart_extra_container">
            <div class="container">
                <div class="row">

                    <!-- Shipping & Delivery -->
                    <div class="col-xxl-6">
                        <div class="cart_extra cart_extra_1">

                        </div>
                    </div>

                    <!-- Cart Total -->
                    <div class="col-xxl-6">
                        <div class="cart_extra cart_extra_2">
                            <div class="cart_extra_content cart_extra_total">
                                <div class="cart_extra_title">结算</div>
                                <ul class="cart_extra_total_list">
                                    <li
                                            class="d-flex flex-row align-items-center justify-content-start">
                                        <div class="cart_extra_total_title">总价</div>
                                        <div class="cart_extra_total_value ml-auto">¥${cart_price}</div>
                                    </li>
                                    <li
                                            class="d-flex flex-row align-items-center justify-content-start">
                                        <div class="cart_extra_total_title">快递</div>
                                        <div class="cart_extra_total_value ml-auto">随意</div>
                                    </li>
                                    <li
                                            class="d-flex flex-row align-items-center justify-content-start">
                                        <div class="cart_extra_total_title">总计</div>
                                        <div class="cart_extra_total_value ml-auto">¥${cart_price}</div>
                                    </li>
                                </ul>
                                <div class="checkout_button trans_200">
                                    <a href="toAddress.to?type=now">立即结算</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Newsletter -->

    <div class="newsletter">
        <div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/newsletter.jpg" data-speed="0.8"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="newsletter_content text-center">
                        <div class="newsletter_title_container">
                            <div class="newsletter_title">subscribe to our newsletter</div>
                            <div class="newsletter_subtitle">we won't spam, we promise!</div>
                        </div>
                        <div class="newsletter_form_container">
                            <form action="#" id="newsletter_form" class="newsletter_form">
                                <input type="email" class="newsletter_input" placeholder="your e-mail here" required="required">
                                <button class="newsletter_button">submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->

    <footer class="footer">
        <div class="footer_content">
            <div class="section_container">
                <div class="container">
                    <div class="row">

                        <!-- About -->
                        <div class="col-xxl-3 col-md-6 footer_col">
                            <div class="footer_about">
                                <!-- Logo -->
                                <div class="footer_logo">
                                    <a href="#"><div>a<span>star</span></div></a>
                                </div>
                                <div class="footer_about_text">
                                    <p>Donec vitae purus nunc. Morbi faucibus erat sit amet congue mattis. Nullam fringilla faucibus urna, id dapibus erat iaculis ut. Integer ac sem.</p>
                                </div>
                                <div class="cards">
                                    <ul class="d-flex flex-row align-items-center justify-content-start">
                                        <li><a href="#"><img src="images/card_1.jpg" alt=""></a></li>
                                        <li><a href="#"><img src="images/card_2.jpg" alt=""></a></li>
                                        <li><a href="#"><img src="images/card_3.jpg" alt=""></a></li>
                                        <li><a href="#"><img src="images/card_4.jpg" alt=""></a></li>
                                        <li><a href="#"><img src="images/card_5.jpg" alt=""></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Questions -->
                        <div class="col-xxl-3 col-md-6 footer_col">
                            <div class="footer_questions">
                                <div class="footer_title">questions</div>
                                <div class="footer_list">
                                    <ul>
                                        <li><a href="#">About us</a></li>
                                        <li><a href="#">Track Orders</a></li>
                                        <li><a href="#">Returns</a></li>
                                        <li><a href="#">Jobs</a></li>
                                        <li><a href="#">Shipping</a></li>
                                        <li><a href="#">Blog</a></li>
                                        <li><a href="#">Partners</a></li>
                                        <li><a href="#">Bloggers</a></li>
                                        <li><a href="#">Support</a></li>
                                        <li><a href="#">Terms of Use</a></li>
                                        <li><a href="#">Press</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Blog -->
                        <div class="col-xxl-3 col-md-6 footer_col">
                            <div class="footer_blog">
                                <div class="footer_title">blog</div>
                                <div class="footer_blog_container">

                                    <!-- Blog Item -->
                                    <div class="footer_blog_item d-flex flex-row align-items-start justify-content-start">
                                        <div class="footer_blog_image"><a href="blog.html"><img src="images/footer_blog_1.jpg" alt=""></a></div>
                                        <div class="footer_blog_content">
                                            <div class="footer_blog_title"><a href="blog.html">what shoes to wear</a></div>
                                            <div class="footer_blog_date">june 06, 2018</div>
                                            <div class="footer_blog_link"><a href="blog.html">Read More</a></div>
                                        </div>
                                    </div>

                                    <!-- Blog Item -->
                                    <div class="footer_blog_item d-flex flex-row align-items-start justify-content-start">
                                        <div class="footer_blog_image"><a href="blog.html"><img src="images/footer_blog_2.jpg" alt=""></a></div>
                                        <div class="footer_blog_content">
                                            <div class="footer_blog_title"><a href="blog.html">trends this year</a></div>
                                            <div class="footer_blog_date">june 06, 2018</div>
                                            <div class="footer_blog_link"><a href="blog.html">Read More</a></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <!-- Contact -->
                        <div class="col-xxl-3 col-md-6 footer_col">
                            <div class="footer_contact">
                                <div class="footer_title">contact</div>
                                <div class="footer_contact_list">
                                    <ul>
                                        <li class="d-flex flex-row align-items-start justify-content-start"><span>C.</span><div>Your Company Ltd</div></li>
                                        <li class="d-flex flex-row align-items-start justify-content-start"><span>A.</span><div>1481 Creekside Lane  Avila Beach, CA 93424, P.O. BOX 68</div></li>
                                        <li class="d-flex flex-row align-items-start justify-content-start"><span>T.</span><div>+53 345 7953 32453</div></li>
                                        <li class="d-flex flex-row align-items-start justify-content-start"><span>E.</span><div>office@youremail.com</div></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Social -->
        <div class="footer_social">
            <div class="section_container">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="footer_social_container d-flex flex-row align-items-center justify-content-between">
                                <!-- Instagram -->
                                <a href="#">
                                    <div class="footer_social_item d-flex flex-row align-items-center justify-content-start">
                                        <div class="footer_social_icon"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                                        <div class="footer_social_title">instagram</div>
                                    </div>
                                </a>
                                <!-- Google + -->
                                <a href="#">
                                    <div class="footer_social_item d-flex flex-row align-items-center justify-content-start">
                                        <div class="footer_social_icon"><i class="fa fa-google-plus" aria-hidden="true"></i></div>
                                        <div class="footer_social_title">google +</div>
                                    </div>
                                </a>
                                <!-- Pinterest -->
                                <a href="#">
                                    <div class="footer_social_item d-flex flex-row align-items-center justify-content-start">
                                        <div class="footer_social_icon"><i class="fa fa-pinterest" aria-hidden="true"></i></div>
                                        <div class="footer_social_title">pinterest</div>
                                    </div>
                                </a>
                                <!-- Facebook -->
                                <a href="#">
                                    <div class="footer_social_item d-flex flex-row align-items-center justify-content-start">
                                        <div class="footer_social_icon"><i class="fa fa-facebook" aria-hidden="true"></i></div>
                                        <div class="footer_social_title">facebook</div>
                                    </div>
                                </a>
                                <!-- Twitter -->
                                <a href="#">
                                    <div class="footer_social_item d-flex flex-row align-items-center justify-content-start">
                                        <div class="footer_social_icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
                                        <div class="footer_social_title">twitter</div>
                                    </div>
                                </a>
                                <!-- YouTube -->
                                <a href="#">
                                    <div class="footer_social_item d-flex flex-row align-items-center justify-content-start">
                                        <div class="footer_social_icon"><i class="fa fa-youtube" aria-hidden="true"></i></div>
                                        <div class="footer_social_title">youtube</div>
                                    </div>
                                </a>
                                <!-- Tumblr -->
                                <a href="#">
                                    <div class="footer_social_item d-flex flex-row align-items-center justify-content-start">
                                        <div class="footer_social_icon"><i class="fa fa-tumblr-square" aria-hidden="true"></i></div>
                                        <div class="footer_social_title">tumblr</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Credits -->
        <div class="credits">
            <div class="section_container">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="credits_content d-flex flex-row align-items-center justify-content-end">
                                <div class="credits_text">
                                    Copyright &copy;<script>document.write(new Date().getFullYear());</script> - Colorlib All rights reserved | More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="styles/bootstrap-4.1.3/popper.js"></script>
<script src="styles/bootstrap-4.1.3/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="js/cart.js"></script>
<script type="application/javascript">
    //增加商品数量
    $(document).ready(function(){
        var add=function (event) {
            //解绑点击事件
            $(".qty_add").unbind("click");
            var gid=$(this).attr("gid");
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/addShopCar.do",
                data:{
                  "gid":gid
                },
                success:function (result) {
                    if (result.flag){
                        var str=result.message.split(",");
                        var count=str[0];
                        var allprice=str[1];
                        var thecount=str[2];
                        var theprice=str[3];
                        var spid="#sp_"+gid;
                        var spaid="#spa_"+gid;
                        $(".cart_num").html(count);
                        $(".cart_price").html(allprice);
                        $(spid).html(theprice);
                        $(spaid).html(thecount);
                    }
                    $(".qty_add").click(add);
                }

            })

        }
        //绑定
     $(".qty_add").click(add);

        //减少商品数量
        var deletefun=function (event) {
            //解绑
            $(".qty_sub").unbind("click");
            var gid=$(this).attr("gid");
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/deleteGoods.do",
                data: {
                   "gid":gid
                },
                success:function (result) {
                    if (result.flag){
                        var res = result.message.split(",");
                        if (res[2]==0){
                            var liid="#li_"+gid;
                            $(liid).remove();
                            $(".cart_num").html(res[0]);
                            $(".cart_price").html(res[1]);
                        }else {
                            var spid="#sp_"+gid;
                            var spaid="#spa_"+gid;
                            $(".cart_num").html(res[0]);
                            $(".cart_price").html(res[1]);
                            $(spid).html(res[3]);
                            $(spaid).html(res[2]);
                        }
                    }
                    $(".qty_sub").click(deletefun);
                }
            })
        }
        $(".qty_sub").click(deletefun);



        //全选框操作
        $("input[name='allcheck']").click(function(){
            $("input[name='evecheck']").prop("checked",$(this).prop("checked"));
        })
        $("input[name='evecheck']").click(function () {
            var vt=$("input[name='evecheck']").length==$("input[name='evecheck']:checked").length;
            $("input[name='allcheck']").prop("checked",vt);
        })
        
        $("#btn03").click(function () {
            var changdu=$("input[name='evecheck']:checked").length;
            if (changdu==0){
                alert("选中商品不能为空");
            }else {
                $("#sdsd").submit();
            }

        })
    })
</script>
</body>
</html>
